<template>
  <div class=" relative O " style="height:1000px">
    <!-- 登录左列 -->
    <rose-cool-bg v-model="state" class=" pointer-events-none Z1" style="transition: 1.2s 0.4s ease-in-out" :mode="mode" :class1="['W60','H100','top0','bottom0','opacity10', 'left0','YCAround']"
      :class2="['W60','H100','top0','bottom0','opacity0', 'left-50','YCAround']" :class3="['H30','opacity10','top0','bottom75', 'left0','W100','XAroundC']"
      :class4="['H30','opacity0','top0','bottom100', 'left0','W100','XAroundC']" @changeWidth="handldScree($event)" @changeHeight="handldScreeH($event)">
      <div class=" YCT color-white P30">
        <h2>
          Manage your orderssettle:
        </h2>
        <span>It is a long established fact that a reader will be distracted by the readable content.</span>
      </div>

      <rose-image v-model="state" :src="require('@/assets/reg.svg')" :src3="require('@/assets/r1.svg')" :src4="require('@/assets/r1.svg')" :class1="['img-w100']" :class2="['img-w100']"
        :class3="['img-h100']" :class4="['img-h100']" />
      <!-- <img class=" img-w100" src="@/assets/reg.svg" alt="" /> -->
    </rose-cool-bg>
    <!-- 注册右列 -->
    <rose-cool-bg class=" pointer-events-none Z1" style="transition: 1.2s 0.4s ease-in-out" v-model="state" :mode="mode" :class1="['W60','H100','top0','bottom0', 'opacity0', 'right-50','YCAround']"
      :class2="['W60','H100','top0','bottom0', 'opacity10', 'right0','YCAround']" :class3="['H30','opacity0','top100','bottom0','left0','W100','XAroundC']"
      :class4="['H30','opacity10','top75','bottom0', 'left0','W100','XAroundC']" @changeWidth="handldScree($event)" @changeHeight="handldScreeH($event)">
      <div class=" YCT color-white P30">
        <h2>
          用户注册 Manage your orderssettle:
        </h2>
        <span>It is a long established fact that a reader will be distracted by the readable content.</span>
      </div>
      <rose-image v-model="state" :src="require('@/assets/login.svg')" :class1="['img-w100']" :class2="['img-w100']" :class3="['img-h100']" :class4="['img-h100']" />
      <!-- <img class=" img-w100" src="@/assets/login.svg" alt="" /> -->
    </rose-cool-bg>

    <!-- 登录表单 -->
    <rose-cool-bg v-model="state" :mode="mode" class="  PLR5 YCC " style="transition: 1.2s 0.4s ease-in-out" :class1="['W40', 'top0','bottom0','opacity10', 'right0']"
      :class2="['W40', 'top0','bottom0', 'opacity0', 'right25']" :class3="['W100','H60','top25','bottom0', 'opacity10', 'right0']" :class4="['W100','H0','top100','bottom0', 'opacity0', 'right0']"
      @changeWidth="handldScree($event)" @changeHeight="handldScreeH($event)">
      <!-- 登录表单上面的图片,在最大的时候显示 -->
      <rose-image v-model="state" :src="require('@/assets/r1.svg')" class="img-w100 MB30 " :class1="['img-w100']" :class2="['img-w100']" :style3="{display:'none'}" :style4="{display:'none'}" />

      <rose-form :form="form" labelPosition="right" :space="10">
        <rose-form-item>
          <rose-input v-model="form.account" theme="primary" round size="lg" placeholder="请输入内容" left-text="帐号：" left-icon="iconadd-account" clear />
        </rose-form-item>
        <rose-form-item>
          <rose-input v-model="form.account" theme="primary" round size="lg" placeholder="请输入内容" left-text="帐号：" left-icon="iconadd-account" clear />
        </rose-form-item>
        <rose-form-item align="between">
          <rose-checkbox v-model="checkboxState" label="记住我" class=" ML10" theme="primary" />
          <rose-button size="lg" round class=" bg-primary-linear S3" theme="primary" outline outlight @click="state = 3">登 录 Sing in</rose-button>
        </rose-form-item>
        <rose-form-item align="between" class=" MT30">
          <div>
            <span class=" color-gray9">Don't have an account? </span>
            <rose-button theme="primary" mode="text" @click="state=2">Sign up</rose-button>
            <rose-button theme="primary" mode="text" @click="state=4">Sign up</rose-button>
            <router-link to="/main">进入主页</router-link>
          </div>
        </rose-form-item>

      </rose-form>
    </rose-cool-bg>
    <!-- 注册表单 -->
    <rose-cool-bg v-model="state" :mode="mode" class="  PLR5 YCC" style="transition: 1.2s 0.4s ease-in-out" :class1="['W40', 'top0','bottom0','opacity0', 'left25']"
      :class2="['W40', 'top0','bottom0','opacity10', 'left0']" :class3="['W100','H0','top0','bottom100', 'opacity0', 'left0']" :class4="['W100','H60','top0','bottom75', 'opacity10', 'left0']"
      @changeWidth="handldScree($event)" @changeHeight="handldScreeH($event)">
      <rose-form :form="form" labelPosition="right" :space="20">
        <rose-form-item>
          <rose-input v-model="form.account" theme="primary" round size="lg" placeholder="请输入内容" left-text="帐号：" left-icon="iconadd-account" clear />
        </rose-form-item>
        <rose-form-item>
          <rose-input v-model="form.account" theme="primary" round size="lg" placeholder="请输入内容" left-text="密码：" left-icon="iconadd-account" clear />
        </rose-form-item>
        <rose-form-item>
          <rose-input v-model="form.account" theme="primary" round size="lg" placeholder="请输入内容" left-text="重复密码：" left-icon="iconadd-account" clear />
        </rose-form-item>
        <rose-form-item>
          <rose-input v-model="form.account" width="200px" :maxlength="4" theme="primary" round size="lg" left-text="验证码：" left-icon="iconadd-account" clear />
        </rose-form-item>
        <rose-form-item>
          <rose-button-group size="lg" round>
            <rose-button class=" bg-primary-linear-tobr W100" size="lg" round theme="coffee" outline outlight @click="handleChangeBigCss">点击注册</rose-button>
            <rose-button class=" bg-primary-linear" size="lg" round theme="coffee" outline outlight @click="state=3">登 录</rose-button>
            <rose-button class=" bg-primary-linear-r W100" size="lg" round theme="coffee" outline outlight @click="state=4">注册4 按钮</rose-button>
            <rose-button class=" bg-primary-linear-r W100" size="lg" round theme="coffee" outline outlight @click="mode=0">切换fixed</rose-button>
          </rose-button-group>
        </rose-form-item>
      </rose-form>
    </rose-cool-bg>

    <!-- 半弧背景 -->
    <rose-cool-bg class="bg-primary-linear R50 " style="transition: 1s 0.7s ease-in-out" v-model="state" :mode="mode" :class1="['class1']" :class2="['class2']" :class3="['class3']"
      :class4="['class4']" @changeWidth="handldScree($event)" @changeHeight="handldScreeH($event)">
    </rose-cool-bg>

  </div>
</template>

<script>
export default {
  data() {
    return {
      state: 1,
      mode: 1,
      checkboxState: false,
      form: {
        name: '',
        age: '',
        sex: ''
      }
    }
  },
  methods: {
    handleChangeBigCss() {
      this.state === 1 ? (this.state = 2) : (this.state = 1)
    },
    handldScree(e) {
      console.log(e)
      e < 1500 ? (this.state = 3) : (this.state = 1)
    },
    handldScreeH(e) {
      // console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.class0 {
  transition: 1s 0.7s ease-in-out;
}
.class1 {
  // animation: 0.6s class1 linear forwards;
  top: -50%;
  bottom: -5%;
  left: -80%;
  right: 40%;
}
.class2 {
  // animation: 0.6s class2 linear forwards;
  top: -50%;
  bottom: -5%;
  left: 40%;
  right: -80%;
}
.class3 {
  top: -90%;
  bottom: 70%;
  left: -50%;
  right: -20%;
}
.class4 {
  top: 70%;
  bottom: -90%;
  left: -20%;
  right: -50%;
}

@keyframes class1 {
  0% {
    top: -60%;
    bottom: -30%;
    left: 50%;
    right: -50%;
  }
  75% {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(2);
  }
  100% {
    top: -50%;
    bottom: -5%;
    left: -60%;
    right: 40%;
    transform: scale(1);
  }
}
@keyframes class2 {
  0% {
    top: -50%;
    bottom: -5%;
    left: -60%;
    right: 40%;
  }
  60% {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(2);
  }
  100% {
    top: -60%;
    bottom: -30%;
    left: 50%;
    right: -50%;
    transform: scale(1);
  }
}

.l2r {
  transition: 1.2s 0.4s ease-in-out;
}
.in_l2r_1 {
  // animation: 0.5s in_l2r_1 linear forwards;
  opacity: 1;
  left: 0;
}
.out_l2r_2 {
  // animation: 1s out_l2r_2 linear forwards;
  opacity: 0;
  left: -50%;
}

.in_r2l_1 {
  // animation: 0.5s in_l2r_1 linear forwards;
  opacity: 1;
  right: 0;
}
.out_r2l_2 {
  // animation: 1s out_l2r_2 linear forwards;
  opacity: 0;
  z-index: -1;
  right: 0%;
}

@keyframes in_l2r_1 {
  0% {
    opacity: 1;
    left: -50%;
    z-index: 1;
  }
  100% {
    opacity: 1;
    left: 0;
    z-index: 1;
  }
}
@keyframes out_l2r_2 {
  0% {
    opacity: 1;
    left: 0%;
  }
  100% {
    opacity: 0;
    left: -50;
  }
}
</style>
